// 使用递归封装el-menu
<template>
  <div class="navMenu">
    <label v-for="(navMenu, index) in navMenus" :key="index">
      <!-- 只有一级时显示 -->
      <el-menu-item
        v-if="!navMenu.sub"
        :key="navMenu.key"
        :data="navMenu"
        :index="navMenu.key"
        :route="navMenu.path"
      >
        <i :class="navMenu.icon"></i>
        <span slot="title">{{ navMenu.text }}</span>
      </el-menu-item>
      <!-- 有多级时显示 -->
      <el-submenu
        v-if="navMenu.sub"
        :key="navMenu.key"
        :data="navMenu"
        :index="navMenu.key"
      >
        <template slot="title">
          <i :class="navMenu.icon"></i>
          <span> {{ navMenu.text }}</span>
        </template>
        <NavMenu :navMenus="navMenu.sub"></NavMenu>
      </el-submenu>
    </label>
  </div>
</template>
 
<script>
export default {
  name: "NavMenu",
  props: ["navMenus"],
  data() {
    return {};
  },
  methods: {},
};
</script>
 
<style scoped>
</style>